import { useEffect, useState } from "react";
import { useStore } from "@/store";
import { useLocation } from "react-router-dom";
import { EditOutlined } from "@ant-design/icons";
import { Modal, Input, message } from "antd";
import { nanoid } from "nanoid";
import StorageManager from "@/utils/StorageManager";

import SlideTop from "./components/SlideTop";
import SlideContent from "./components/SlideContent";

const SlideRead = () => {
  const {
    sildeFatherId,
    slideFatnerList,
    slideList,
    currentSlideIndex,
    slideTitle,
    updateSlideTitle,
    updateSlide,
    setCurrentPresentation,
    updateAnyData,
  } = useStore();
  const [modalVisible, setModalVisible] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const { search, pathname } = useLocation();
  // 创建一个URLSearchParams对象
  const params = new URLSearchParams(search);
  // 获取title和id的值
  const query = {
    title: params?.get("title") || "",
    id: params?.get("id") || "",
  };
  // const { query } = useLocation();

  useEffect(() => {
    const storeData =
      StorageManager.getSessionStorageSimpleSync("storage-store");
    const storeDataBro = JSON.parse(storeData || []);
    if (query && query.title) {
      updateSlideTitle(query.title);
    }
    //  有id说明是编辑，需要找到一个index的item然后更新
    if (query && query.id && storeDataBro?.length > 0) {
      const itemFlag = storeDataBro.find((item: any) => item.id === query.id);
      if (itemFlag) {
        updateSlideTitle(itemFlag?.slideTitle);
        setCurrentPresentation(1);
        updateAnyData({
          sildeFatherId: query?.id,
          slideList: itemFlag?.slideList,
          sildeBgType: itemFlag?.sildeBgType,
          sildeBgVal: itemFlag?.sildeBgVal,
          sildeBgVal2: itemFlag?.sildeBgVal2,
        });
        updateSlide(itemFlag.slideList);
      }
    }
  }, []);

  const handleCancel = () => {
    setModalVisible(false);
    setInputValue("");
  };

  const handleOK = () => {
    if (!inputValue) {
      message.error("请输入幻灯片标题");
      return;
    }
    setModalVisible(false);
    updateSlideTitle(inputValue);
    handleCancel();
  };

  return (
    <div
      style={{
        display: "flex",
        width: "100%",
        height: "100%",
        overflow: "hidden",
        background: "#f3f4f6",
      }}
    >
      <div
        style={{
          flex: 1,
          width: "calc(100% - 200px)",
          height: "100%",
          overflow: "hidden",
        }}
      >
        <SlideTop />
        <SlideContent />
      </div>
    </div>
  );
};

export default SlideRead;
